<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big {
            width: 1150px;
            height: 600px;
            margin: auto;
            position: relative;
        }

        .tab div {
            display: inline-block;
            width: 163px;
            margin-bottom: 20px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: rgb(234, 19, 19);
            font-weight: 700;
            font-size: 20px;
        }

        .im {
            display: inline-block;
            margin-right: 15px;
            margin-left: 10px;
            margin-top: 10px;
            width: 200px;
            margin-bottom: 20px;
        }

        .carr {
            position: absolute;
            top: 30px;
            right: 20px;
            color: #9c9696;
            cursor: pointer;
            background-color: antiquewhite;
            width: 55px;
            text-align: center;
            height: 30px;
            line-height: 30px;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div class="big">
        <h1>热销爆款</h1>
        <!-- tab -->
        <div class="tab">
            <div>空调</div>
            <div>平板电视</div>
            <div>生活电器</div>
            <div>洗衣机</div>
            <div>冰箱</div>
            <div>厨房大电</div>
        </div>

        <!-- 内容 -->
        <div class="content">

        </div>

        <!-- 购物车 -->
        <div class="carr" onclick="cas()">购物车</div>
    </div>

    <script>
        // 数据
        var arr = [{
            pid: 0,
            id: 1,
            img: './图1.png',
            name: '美的空调 3匹 新一级能效',
            price: 6599,
            is: false,
            num: 1
        }, {
            pid: 0,
            id: 2,
            img: './图2.png',
            name: '科隆空调 大1匹 新三级能效',
            price: 1499,
            is: false,
            num: 1
        }, {
            pid: 0,
            id: 3,
            img: './图3.png',
            name: '奥克斯立式空调 新一级能效',
            price: 4899,
            is: false,
            num: 1
        }, {
            pid: 0,
            id: 4,
            img: './图4.png',
            name: '松下空调 3匹柜机 ',
            price: 3198,
            is: false,
            num: 1
        }, {
            pid: 0,
            id: 5,
            img: './图5.png',
            name: '海尔空调 3匹 立式',
            price: 5699,
            is: false,
            num: 1
        }, {
            pid: 0,
            id: 6,
            img: './图6.png',
            name: '格力空调 3匹 高效除甲醛',
            price: 9999,
            is: false,
            num: 1
        }, {
            pid: 0,
            id: 7,
            img: './图7.png',
            name: '格力空调 3匹 新一级能效',
            price: 8699,
            is: false,
            num: 1
        }, {
            pid: 0,
            id: 8,
            img: './图8.png',
            name: 'TCL空调 2匹 新一级能效',
            price: 3199,
            is: false,
            num: 1
        }, {
            pid: 0,
            id: 9,
            img: './图9.png',
            name: '华凌空调 1.5匹 新一级能效',
            price: 1899,
            is: false,
            num: 1
        }, {
            pid: 0,
            id: 10,
            img: './图10.png',
            name: '格力空调 3匹 客厅空调立式',
            price: 5599,
            is: false,
            num: 1
        }, {
            pid: 1,
            id: 1,
            img: './图10.png',
            name: '格力空调 3匹 客厅空调立式',
            price: 5599,
            is: false,
            num: 1
        }, {
            pid: 2,
            id: 1,
            img: './图1.png',
            name: '格力空调 3匹 客厅空调立式',
            price: 5599,
            is: false,
            num: 1
        }, {
            pid: 3,
            id: 1,
            img: './图2.png',
            name: '格力空调 3匹 客厅空调立式',
            price: 3599,
            is: false,
            num: 1
        }, {
            pid: 4,
            id: 1,
            img: './图4.png',
            name: '格力空调 3匹 客厅空调立式',
            price: 2599,
            is: false,
            num: 1
        }, {
            pid: 5,
            id: 1,
            img: './图7.png',
            name: '格力空调 3匹 客厅空调立式',
            price: 5599,
            is: false,
            num: 1
        },]

        // 购物车数据
        var car_list = []

        //渲染
        var content = document.querySelector('.content')
        var tab = document.querySelectorAll('.tab div')
        arr.forEach(i => {
            if (i.pid == 0) {
                content.innerHTML += `
                    <div class="im">
                        <img src="${i.img}" onclick='car(${i.id})'><br>
                        <span>${i.name}</span><br>
                        <span style="color: red;font-weight: 700;font-size: 18px;">￥${i.price}</span>
                    </div>`
            }
            tab[0].style.background = 'red'
            tab[0].style.color = 'white'
        })

        tab.forEach((item, index) => {
            item.addEventListener('click', () => {
                content.innerHTML = ''
                arr.forEach(i => {
                    if (i.pid == index) {
                        content.innerHTML += `
                        <div class="im">
                            <img src="${i.img}" onclick='car(${i.id})'><br>
                            <span>${i.name}</span><br>
                            <span style="color: red;font-weight: 700;font-size: 18px;">￥${i.price}</span>
                        </div>`
                    }
                })
            })
        })

        // 加入购物车
        function car(id) {
            var a = arr.find(item => item.id == id)
            car_list.push(a)
            localStorage.setItem('goods',JSON.stringify(car_list))
        }

        function cas() {
            location.assign('./购物车.html')
        }
    </script>
</body>

</html>